<template>
    <div>
        <el-container>
            <!-- 头部============================================ -->
            <el-header>
                <div>
                    <img src="../../public/1.jpg" alt="">
                    <p>课堂在线后台管理系统</p>
                </div>
                <span>
                    <el-dropdown @command="drop">
                        <span class="el-dropdown-link" style="font-size:16px">
                            {{email}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="info">个人信息</el-dropdown-item>
                            <el-dropdown-item command="logout">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </span>
            </el-header>
            <!-- 侧边栏============================================= -->
            <el-container>
                <el-aside :width="isCollapse ? '50px' : '200px'" style="height:calc(100vh - 60px)">
                    <el-menu background-color="#324057" text-color="#fff" active-text-color="#ffd04b"
                        style="height:100%" router :collapse-transition=false :collapse="isCollapse" transition
                        unique-opened :default-active="hanzi" @select="libo">
                        <el-menu-item @click="zhan()">|||</el-menu-item>
                        <el-menu-item index="/HomeHome"><i style="marginRight:15px"
                                class="iconfont icon-huangguan"></i>首页</el-menu-item>
                        <el-submenu index="1">
                            <template slot="title"><i style="marginRight:15px"
                                    class="iconfont icon-wodezijin"></i>资金管理</template>
                            <el-menu-item-group>
                                <el-menu-item index="/HomeIndex" style="background:#324057;">资金流水</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title"><i style="marginRight:15px"
                                    class="iconfont icon-xinxi "></i>信息管理</template>
                            <el-menu-item-group>
                                <el-menu-item index="/personal">个人信息</el-menu-item>
                            </el-menu-item-group>

                        </el-submenu>
                    </el-menu>
                </el-aside>
                <!-- 尾部============================================= -->

                <el-main>
                    <router-view></router-view>
                </el-main>


            </el-container>
        </el-container>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            isCollapse: false,
            hanzi:''
        };
    },
    methods: {
        libo(path){
            this.hanzi=  path
            sessionStorage.setItem('user',this.hanzi)
        },
        zhan() {
            this.isCollapse = !this.isCollapse
        },
        drop(val) {
            if (val === 'info') {
                this.$router.push('/personal')
            } else {
                localStorage.clear()
                this.$message.info('退出成功')
                this.$router.push('/login')
            }
        }
    },
    created() {
        var cui = sessionStorage.getItem('user')
        this.hanzi = cui
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))));
    }
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state));
    });
  },
    computed: {
        ...mapState(['email'])
    },
};
</script>

<style lang="scss" scoped>
.el-container {
    .el-header {
        background-color: #324057;
        display: flex;
        justify-content: space-between;
        align-items: center;
        div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
            font-size: 24px;
            img {
                width: 60px;
                height: 60px;
                border-radius: 50%;
            }
        }
    }
    .el-main {
        width: 100%;
        padding: 0px;
    }
}
.el-menu {
    border: none;
}
</style>